import ProjectListScreens from "./screens/project-list";
import { useAuth } from "./context/auth-context";
import styled from "@emotion/styled";
import { ButtonNoPadding, Row } from "./components/lib";
import { ReactComponent as Logo } from "./assets/test.svg";
import { Button, Dropdown, Menu } from "antd";
import { Route, Routes, Navigate } from "react-router";
// import {  BrowserRouter as Router } from 'react-router-dom'
import { ProjectScreen } from "./screens/project";
import { resetRoute } from "./utils";
// import { ReactNode, useState } from "react";
import { ProjectModal } from "./screens/project-list/project-modal";
import { ProjectPopover } from "./components/project-popover";
import { UserPopover } from "./components/user-popver";
const PageHeader = () => {
  const { loginOut, user } = useAuth();
  const menu = (
    <Menu>
      <Menu.Item key={"loginOut"}>
        <Button type={"link"} onClick={loginOut}>
          登出
        </Button>
      </Menu.Item>
    </Menu>
  );
  return (
    <Header jcsb={true}>
      <HeaderLeft gap={true}>
        <ButtonNoPadding type={"link"} onClick={resetRoute}>
          <Logo width="18rem" color="rgb(38, 132, 255)" />
        </ButtonNoPadding>
        <ProjectPopover />
        <UserPopover />
        {/*<span>用户</span>*/}
      </HeaderLeft>
      <HeaderRight>
        <Dropdown overlay={menu}>
          <Button
            type={"link"}
            onClick={(e) => {
              e.preventDefault();
            }}
          >
            Hi, {user?.name}
          </Button>
        </Dropdown>
      </HeaderRight>
    </Header>
  );
};

export const AuthenticatedApp = () => {
  // const [ projectModalOpen, setProjectModalOpen ] = useState(false)
  return (
    <Container>
      <PageHeader />
      <Main>
        {/*<ProjectListScreens/>*/}
        <Routes>
          <Route
            path={"/projects"}
            element={
              <ProjectListScreens
              // projectButton={
              //   <ButtonNoPadding
              //     onClick={() => {setProjectModalOpen(true)}}
              //     type={'link'}
              //   >
              //     创建项目
              //   </ButtonNoPadding>
              // }
              />
            }
          />
          <Route path={"/projects/:projectId/*"} element={<ProjectScreen />} />
          <Navigate to={`${window.location.pathname}/projects`} />
        </Routes>
      </Main>
      <ProjectModal />
    </Container>
  );
};
const Container = styled.div`
  //display: grid;
  //grid-template-rows: 6rem calc(100vh - 6rem);
  height: 100vh;
`;
const Header = styled(Row)`
  height: 6rem;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
  box-sizing: border-box;
`;
const HeaderLeft = styled(Row)``;
const HeaderRight = styled.div``;
const Main = styled.main`
  height: calc(100vh - 6.4rem);
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
`;
